<template>
  <el-drawer
    v-model="drawerVisible"
    class="add-task-drawer"
    :size="props.size"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <template #header>
      <div class="text-lg font-semibold">{{ props.title }}</div>
    </template>
    <follow-plan
      ref="followPlanRef"
      :user-id="formData?.userId"
      mode="create"
      @submit="handleFollowPlanSubmit"
    />
    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          style="margin-left: 10px"
          @click="handleSubmit"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import FollowPlan from "@/views/followUpPlan/components/followPlan.vue";
import { type FormInstance } from "element-plus";
import { defineEmits, defineExpose, defineProps, ref } from "vue";
// 定义属性
const props = defineProps({
  title: {
    type: String,
    default: "添加随访计划"
  },
  size: {
    type: String,
    default: "600px"
  }
});

// 定义事件
const emit = defineEmits(["save", "close"]);
const followPlanRef = ref();
// 抽屉显示状态
const drawerVisible = ref(false);
const loading = ref(false);

// 表单引用
const formRef = ref<FormInstance>();
const handleFollowPlanSubmit = () => {
  drawerVisible.value = false;
  emit("close");
};
// 表单数据
const formData = ref({});
const handleSubmit = () => {
  followPlanRef.value?.submitForm();
};
// 对外暴露的方法
defineExpose({
  // 打开抽屉的方法
  open(report) {
    formData.value = report;
    drawerVisible.value = true;
  },
  // 关闭抽屉的方法
  close() {
    drawerVisible.value = false;
  }
});
</script>

<style lang="scss">
/* 移除 scoped，使用全局样式 */
.add-task-drawer {
  .follow-plan {
    padding: 20px;
  }
  .el-drawer__header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 0 !important;
    background-color: #fff !important;
  }

  .el-drawer__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  .el-drawer__body {
    padding: 0 !important;
    background-color: #fafafa !important;
  }

  .el-form-item__label {
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 14px !important;
  }

  .el-input__wrapper {
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
  }

  .el-textarea .el-textarea__inner {
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
  }

  .el-date-editor,
  .el-time-picker {
    width: 100% !important;
  }

  .el-button--primary {
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 12px 32px !important;
    font-size: 14px !important;
    background-color: #409eff !important;
    border-color: #409eff !important;

    &:hover {
      background-color: #66b1ff !important;
      border-color: #66b1ff !important;
    }
  }
}

/* 组件内部样式 */
.add-task-drawer .p-6 {
  padding: 24px !important;
  background-color: #fff !important;
  margin: 0 !important;
  min-height: calc(100vh - 60px) !important;
}

.add-task-drawer .el-form {
  max-width: 100% !important;
}

.add-task-drawer .el-form-item {
  margin-bottom: 24px !important;
}

.add-task-drawer .el-form-item:last-child {
  margin-bottom: 0 !important;
}
</style>
